<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">
        <span v-if="type === 'node'">节点配置</span>
        <span v-else>连线配置</span>
      </div>
      <!-- 节点 -->
      <div class="ef-node-form-body">
        <el-form
          :model="node"
          ref="dataForm"
          label-width="80px"
          v-show="type === 'node'"
          label-position="top"
        >
          <!-- <el-form-item label="类型">
            <el-input
              size="mini"
              v-model="node.type"
              :disabled="true"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="名称：">
            <el-input size="mini" v-model="node.name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="left坐标">
            <el-input
              size="mini"
              v-model="node.left"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="top坐标">
            <el-input
              size="mini"
              v-model="node.top"
              :disabled="true"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="ico图标">
            <el-input size="mini" v-model="node.ico"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select size="mini" v-model="node.state" placeholder="请选择">
              <el-option
                v-for="item in stateList"
                :key="item.state"
                :label="item.label"
                :value="item.state"
              >
              </el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="审批人员：">
            <el-text
              v-if="node.type === 'Begin' || node.type === 'End'"
              type="warning"
              >（开始和结束节点可以不选，默认为创建人自动审批）</el-text
            >
          </el-form-item>
          <el-form-item label="" label-width="0px">
            <nodeUser :userSelectors="node.userSelectors"></nodeUser>
            <el-button
              @click="addUserSelector()"
              type="text"
              size="mini"
              icon="Plus"
              >添加人员</el-button
            >
          </el-form-item>
          <el-checkbox v-model="node.isWaitingAllUser"
            >等待所有人员审批</el-checkbox
          >

          <div style="padding-left: 10px" v-show="node.isWaitingAllUser">
            <br />
            <br />
            <el-radio size="mini" v-model="node.proveMode" :label="0"
              >默认（等待所有人通过）</el-radio
            >
            <el-radio size="mini" v-model="node.proveMode" :label="1"
              >等待所有人通过</el-radio
            >
            <el-radio size="mini" v-model="node.proveMode" :label="2"
              >等待任意人通过</el-radio
            >
          </div>
          <br />
          <el-checkbox
            v-model="node.isAutoHandleSameUserStep"
            v-show="node.type !== 'Begin'"
            >上一步审批通过的用户自动通过
            <el-popover
              placement="left"
              title="说明"
              :width="500"
              trigger="click"
            >
              <template #default>
                上一步通过审批的用户自动通过下一步审批
              </template>
              <template #reference>
                <el-button type="text">
                  <el-icon>
                    <InfoFilled />
                  </el-icon>
                </el-button>
              </template>
            </el-popover>
          </el-checkbox>
          <br />
          <el-checkbox
            v-model="node.isIgnoreCreator"
            v-show="node.type !== 'Begin' && node.type !== 'End'"
            >不派发创建人
            <el-popover
              placement="left"
              title="说明"
              :width="500"
              trigger="click"
            >
              <template #default>
                <p>当节点分派人人员有多个时，并且包含创建人时，将不会派发创建人。</p>
                <p>当节点分派人人员只有一个时，并且是创建人时，仍会派发创建人。</p>
              </template>
              <template #reference>
                <el-button type="text">
                  <el-icon>
                    <InfoFilled />
                  </el-icon>
                </el-button>
              </template>
            </el-popover>
          </el-checkbox>
          <br />
          <br />
          <el-form-item label="退回节点：">
            <el-text type="warning"
              >（开始和结束节点可以不选，默认退回上一级来源节点）</el-text
            >
          </el-form-item>
          <el-form-item label="" label-width="0px">
            <rejectNode
              :rejectNodes="node.rejectNodes"
              :nodeList="data.nodeList"
            ></rejectNode>
            <el-button
              @click="addRejectNode()"
              type="text"
              size="mini"
              icon="Plus"
              >添加节点</el-button
            >
          </el-form-item>
          <br />
          <el-form-item>
            <el-button size="mini" icon="el-icon-close" @click="reset"
              >重置</el-button
            >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-check"
              @click="save"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 线条 -->
        <el-form
          :model="line"
          ref="dataForm"
          label-width="80px"
          v-show="type === 'line'"
          label-position="top"
        >
          <el-form-item label="条件名称：">
            <el-input size="mini" v-model="line.label"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="0px">
            <lineCondition :conditions="line.conditions"></lineCondition>
            <el-button
              @click="addLineCondition()"
              type="text"
              size="small"
              icon="Plus"
              >添加条件</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button size="mini" icon="el-icon-close">重置</el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-check"
              @click="saveLine"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!--            <div class="el-node-form-tag"></div>-->
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import rejectNode from "./rejectNode.vue";
import nodeUser from "./nodeUser.vue";
import lineCondition from "./lineCondition.vue";

export default {
  components: { rejectNode, nodeUser, lineCondition },
  data() {
    return {
      visible: true,
      // node 或 line
      type: "node",
      node: {},
      line: {},
      data: {},
      stateList: [
        {
          state: "success",
          label: "成功",
        },
        {
          state: "warning",
          label: "警告",
        },
        {
          state: "error",
          label: "错误",
        },
        {
          state: "running",
          label: "运行中",
        },
      ],
    };
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id) {
      this.type = "node";
      this.data = data;
      data.nodeList.filter((node) => {
        if (node.id === id) {
          this.node = cloneDeep(node);
          this.node.isAutoHandleSameUserStep =
            this.node.isAutoHandleSameUserStep == false ? false : true; //默认就是true
          this.node.isIgnoreCreator = this.node.isIgnoreCreator || false; // 默认 false
        }
      });
    },
    lineInit(line) {
      this.type = "line";
      this.line = line;
    },
    // 修改连线
    saveLine() {
      this.$emit(
        "setLineLabel",
        this.line.from,
        this.line.to,
        this.line.label,
        this.line.conditions
      );
      this.$message("操作成功");
    },
    save() {
      this.data.nodeList.filter((node) => {
        if (node.id === this.node.id) {
          node.name = this.node.name;
          node.left = this.node.left;
          node.top = this.node.top;
          node.ico = this.node.ico;
          node.state = this.node.state;
          node.isWaitingAllUser = this.node.isWaitingAllUser;
          node.isAutoHandleSameUserStep = this.node.isAutoHandleSameUserStep;
          node.isIgnoreCreator = this.node.isIgnoreCreator;
          node.userSelectors = this.node.userSelectors;
          node.rejectNodes = this.node.rejectNodes;
          node.proveMode = this.node.proveMode;
          this.$emit("repaintEverything");
        }
      });
      this.$message("操作成功");
    },
    reset() {
      const nodes = this.data.nodeList.filter(
        (node) => node.id === this.node.id
      );
      if (nodes.length > 0) {
        this.node = cloneDeep(nodes[0]);
      }
    },
    addUserSelector() {
      if (!this.node.userSelectors) this.$set(this.node, "userSelectors", []);
      this.node.userSelectors.push({
        selectorId: "",
        selectorName: "",
        selections: [],
        parameter: "",
        description: "",
        handleType: 0,
      });
    },
    addRejectNode() {
      if (!this.node.rejectNodes) this.$set(this.node, "rejectNodes", []);
      this.node.rejectNodes.push({
        nodeId: "",
        nodeName: "",
        conditions: [],
      });
    },
    addLineCondition() {
      if (!this.line.conditions) this.$set(this.node, "conditions", []);
      this.line.conditions.push({
        conditionId: "",
        conditionName: "",
        parameter: "",
        description: "",
      });
    },
  },
};
</script>

<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  background-color: #fbfbfb;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}
.ef-node-form-body .el-form-item__label {
  padding: 0 0 0px;
}

.ef-node-form-body .el-form-item {
  margin-bottom: 2px;
}

.ef-node-form-body .el-form-item__label {
  font-weight: unset;
}

.ef-node-form-body .el-card__body {
  padding: 6px;
}

.ef-node-form-body .text-description {
  width: 100%;
  color: rgb(153, 153, 153);
  font-size: 12px;
  line-height: 14px;
  margin: 0px;
  word-break: break-word;
}
</style>
